<template>
    <div id="waitForBeHospitalized"></div>

</template>

<script  lang="ts">
import { onMounted, ref, onUpdated } from 'vue';
import { Chart } from '@antv/g2';
import { defineComponent } from 'vue';
import { getInnerRange } from '@vue/compiler-core';
export default defineComponent({
    name: 'waitForBeHospitalized',
    props: {
        data: Array,
    },
    setup(props: any) {
        onUpdated(() => {
            const chart = new Chart({
                container: 'waitForBeHospitalized',
                autoFit: true,
                height: 600,
            });
            chart.coordinate('polar',{
                radius:0.8,
                innerRadius:0.3
            });

            chart.data(props.data || []);
        
            chart.axis('num', {
                line: null,
                tickLine: null,
                label: null
            });
       
            chart
                .interval()
                .position('type*num')
                .color('name')
                .adjust([
                    {
                        type: 'dodge',
                        marginRatio: 10,
                        
                    },
                ]);

            chart.interaction('active-region');
            chart.render();

        })
    }
});




</script>

<style scoped>

</style>